import React from 'react';
import { Icon, Tools } from 'weaver-mobile';
import { toJS } from 'mobx';
import NoData from './NoData';
import MeetingUtil from '../util/meetingUtil';
const getLabel = Tools.getLabel;

export default class ItemCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  componentDidMount() {}
  
  onRowClick = (params)=>{
    const {onRowClick} = this.props
    if(typeof onRowClick === 'function'){
      onRowClick(params)
    }
  }

  componentDidUpdate(nextProps){
    const refsTemp = this.refs;
    if(Object.keys(refsTemp).length > 0){
      Object.keys(refsTemp).forEach(key => {
        if(key.indexOf('contentItemRight') > -1 ){
          const tempIndex = key.split('_')[1]
          const tempHeight = document.getElementById(`contentItemRight_content_${tempIndex}`) ? document.getElementById(`contentItemRight_content_${tempIndex}`).offsetHeight : 65;
          this.refs[`itemCardContent_${tempIndex}`].style.height=(tempHeight+20) +'px';
        }
      });
    }
  }

  render(){
    const conditions = toJS(this.props.datas);
    return (
      conditions && conditions.length===0 ? <NoData msg={getLabel(386662, '当天无会议安排')}/> : conditions && conditions.map((item,key) => {
        let h = 59 * this.getBaseHeight();
        item.address && (h=h+(20 * this.getBaseHeight()))
        h = (item.remindBeforeEnd === '0' && item.remindBeforeStart === '0') ? h-(17 * this.getBaseHeight()) : h+(25 * this.getBaseHeight())
        return (
          <div className="item-card-container" key={item.id} onClick={()=>this.onRowClick(item.id)}>
            <div className="item-card-header">
              <div className="header-item">
                <div>
                  <span className="item-span">{item.beginTime || item.begintime}</span>
                  {item.urgentLevel && <label>{item.urgentLevel==="1" ? getLabel(154,'一般'): item.urgentLevel === "2" ?getLabel(25397,'重要') : item.urgentLevel === "3" ? getLabel(28090,'紧急') : ''}</label>}
                </div>
                <div className="header-item-right"><span>{item.endTime || item.endtime}</span><label>{getLabel(405,'结束')}</label></div>
              </div>
            </div>
            <div className="item-card-content" ref={`itemCardContent_${key}`}>
              <div className={`content-item-left-${item.status}`}></div>
              <div className="content-item-right" ref={`contentItemRight_${key}`} id={`contentItemRight_${key}`}>
                <div style={{margin:'10px 0 10px 10px'}} id={`contentItemRight_content_${key}`}>
                  <div className="content-item-right-name">
                    <span>{item.planName || item.name}</span>
                  </div>
                  <div className="content-item-right-list">
                  {(item.remindBeforeEnd === '0' && item.remindBeforeStart === '0') ? ''
                  // <div><label>{item.remindTypeName || getLabel(19782,'不提醒')}</label></div>
                  :
                  <div style={{display:'flex'}}>
                    <div className="content-item-right-icon"><Icon type={'blog-fill'} size='xxs' />
                    </div>
                    <div className="content-item-right-remind">
                      <ul>
                        <li>
                          {(item.remindBeforeStart !== '0') && <label>{getLabel(19784,'开始前')}<span>{item.remindDateBeforeStart!=='0'?`${item.remindDateBeforeStart}${getLabel(391,'小时')}` :''}{item.remindTimeBeforeStart}{getLabel(15049,'分钟')}</span></label>}
                          {(item.remindBeforeEnd !== '0') && <label>{getLabel(19785,'结束前')}<span>{item.remindDateBeforeEnd!=='0'?`${item.remindDateBeforeEnd}${getLabel(391,'小时')}`:''}{item.remindTimeBeforeEnd}{getLabel(15049,'分钟')}</span></label>}
                        </li>
                        <li>
                          <label>{item.remindTypeName || getLabel(19782,'不提醒')}</label>
                        </li> 
                      </ul> 
                    </div>
                  </div>
                  }
                  </div>
                  {item.address &&
                    <div className="content-item-right-address">
                      <div className="content-item-right-icon">
                        <Icon type={'location'} size='xxs' />
                      </div>
                      <div className="content-item-right-remind">
                      <ul>
                        <li>
                          <label>{item.addressName}</label>
                        </li> 
                      </ul> 
                    </div>
                    </div>
                  }
                </div>
              </div>
            </div>
          </div>
        )
      }) 
    );  
  }

  getBaseHeight = ()=>{
    return MeetingUtil.getBaseHeight();
  }

}

